<template>
  <div class="person">
    姓：<input type="text" v-model="firstName"> <br>
    名：<input type="text" v-model="lastName"> <br>
    全名：<span>{{ fullName }}</span> <br>
    全名：<span>{{ fullName }}</span> <br>
    <button @click="changeFullName">全名改为：li-si</button>
  </div>
</template>

<script lang="ts">
export default {
  name: 'Person',
}
</script>

<script lang="ts" setup>
import { ref, reactive, toRefs, toRef, computed } from 'vue'

let firstName = ref('zhang')
let lastName = ref('san')

// 计算属性 只读的，不能修改 
// let fullName = computed(() => {
//   // console.log('fullName 重新计算了')
//   return `${_capitalize(firstName.value)}-${lastName.value}`
// })



// 可读 可写的计算属性
let fullName = computed({
  get() {
    return `${_capitalize(firstName.value)}-${lastName.value}`
  },
  set(newValue: string) {
   console.log('newValue: ', newValue)
    let names = newValue.split('-')
    if (names.length === 2) {
      firstName.value = names[0]
      lastName.value = names[1]
    }else{
      console.log('输入的格式不正确')

    }
  }

})




function _capitalize(str: string): string {
  if (str.length === 0) return str; // 处理空字符串
  return str.charAt(0).toUpperCase() + str.slice(1);
}

function changeFullName() {
  fullName.value = 'li-si'
}

</script>

<style scoped>
.person {
  background-color: skyblue;
  box-shadow: 0 0 10px;
  border-radius: 10px;
  padding: 20px;
}

button {
  margin: 0 5px;
}

li {
  font-size: 20px;
}
</style>